import React, { useRef, useState } from 'react';
import { NavigationContainer, CommonActions } from '@react-navigation/native';
import { CardStyleInterpolators, createStackNavigator } from '@react-navigation/stack';
import { Home } from './src/components/Home';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { My } from './src/components/My';
import AboutUsPage from './src/components/AboutUsPage';
import { View } from 'react-native';
import AgreementPage from './src/components/AgreementPage';
import { NameList } from './src/components/NameList';
import { NameDetail } from './src/components/NameDetail';
import { Collect } from './src/components/Collect';
import { Detail } from './src/components/Detail';
import { RootSiblingParent } from 'react-native-root-siblings';

import './src/AppConfig'
import { Naming } from './src/components/Naming';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const HomeTab = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: 'crimson',
        inactiveTintColor: 'gray',
        style: { backgroundColor: '#fff' }

      }}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Naming') {
            iconName = focused
              ? 'home-sharp'
              : 'home-outline';
          } else if (route.name === 'Home') {
            iconName = focused ? 'compass' : 'compass-outline';
          }else if (route.name === 'My') {
            iconName = focused ? 'person' : 'person-outline';
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },

      })}
    >
       <Tab.Screen
        name={'Naming'}
        options={{ headerShown: false, title: "主页" }}
        component={Naming}
      />
      <Tab.Screen
        name={'Home'}
        options={{ headerShown: false, title: "发现" }}
        component={Home}
      />
      <Tab.Screen
        name={'My'}
        options={{ headerShown: false, title: "我的" }}
        component={My}
      />

    </Tab.Navigator>
  )
}
const App = () => {
  // console.warn("App")
  return (
    <RootSiblingParent>
      <NavigationContainer
      // Prevents artifacts when navigating between screens
      // theme={{
      //   colors: {
      //     background: colors.background.default,
      //   },
      // }}
      // ref={setNavigatorRef}
      // onStateChange={(state) => {
      //   // Updates redux with latest route. Used by DrawerView component.
      //   const currentRoute = findRouteNameFromNavigatorState(state.routes);
      //   triggerSetCurrentRoute(currentRoute);
      // }}
      >
        <Stack.Navigator
          // initialRouteName={route}
          mode={'modal'}
          screenOptions={{
            headerBackImage: () => (
              <View

                style={[{
                  // shadowColor: '#ddd',
                  // shadowOffset: { width: 2, height: 2 },
                  // shadowOpacity: 0.8,
                  // shadowRadius: 3,
                  backgroundColor: "#fff",
                  padding: 5,
                  borderRadius: 50,
                  marginLeft: 8
                  // margin:22,
                  // borderWidth: 1,


                }]}>
                <Ionicons name="chevron-back-outline" size={24} color={'#262626'} />

              </View>
            ),
            headerStyle: { backgroundColor: '#fff', borderWidth: 0, borderBottomWidth: 0, borderBottomColor: '#fff' },
            headerShown: false,
            headerBackTitleVisible: false,
            cardStyle: { backgroundColor: '#fff' },
            animationEnabled: true,
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            gestureEnabled: true,
            gestureDirection: 'horizontal',
          }}
        >
         
          <Stack.Screen
            name="HomeTab"
            component={HomeTab}
            options={{ headerShown: false, title: " " }}
          />
           <Stack.Screen
            name="Detail"
            component={Detail}
            options={{ headerShown: true, title: " ", headerStyle: { shadowOffset: { height: 0, width: 0 } } }}
          />
          <Stack.Screen
            name="AboutUs"
            component={AboutUsPage}
            options={{ headerShown: true, title: "", headerStyle: { shadowOffset: { height: 0, width: 0 } } }}
          />

          <Stack.Screen
            name="Agreement"
            component={AgreementPage}
            options={{ headerShown: true, title: "", headerStyle: { shadowOffset: { height: 0, width: 0 } } }}
          />
          <Stack.Screen
            name="NameList"
            component={NameList}
            options={{ headerShown: false, title: "", headerStyle: { shadowOffset: { height: 0, width: 0 } } }}
          />
          <Stack.Screen
            name="NameDetail"
            component={NameDetail}
            options={{ headerShown: true, title: " ", headerStyle: { shadowOffset: { height: 0, width: 0 } } }}
          />
          <Stack.Screen
            name="Collect"
            component={Collect}
            options={{ headerShown: false, title: "收藏", headerStyle: { shadowOffset: { height: 0, width: 0 } } }}
          />



        </Stack.Navigator>
      </NavigationContainer>
    </RootSiblingParent>

  );
}


export default App;